import { Breadcrumb } from "antd";
import { useLocation } from "react-router-dom";
import { Link } from "react-router-dom";
import { memo } from "react";

const OrderBreadcrumb = memo(function (props) {
  const location = useLocation();

  return (
    <div style={{ background: "#fff", padding: "24px" }}>
      <Breadcrumb style={{ fontSize: "20px", marginTop: "12px" }}>
        <Breadcrumb.Item>{props.tit}</Breadcrumb.Item>
        <Breadcrumb.Item>
          <Link to={location.pathname}>{props.pathName}</Link>
        </Breadcrumb.Item>
      </Breadcrumb>
      <h1 style={{ margin: "20px 0", fontSize: "24px" }}>{props.pathName}</h1>
      <div style={{ width: "100%", height: "1px", background: "#eee" }}></div>
    </div>
  );
});
export default OrderBreadcrumb;
